import React from 'react'
import {
	View,
	Text,
	TouchableOpacity,
	StyleSheet,
	TextStyle,
	ViewStyle,
	Image,
	ImageStyle,
	Alert,
} from 'react-native'
import InfoLayout from './InfoLayout'
import RadiusButton from './RadiusButton'
import { commonStyle, translateSize, themeColors, definedColors } from 'styles';
import { Division, Toast } from 'components';
import asssets from 'modules/assets'
import assets from 'modules/assets'
import { navigate } from 'services/navigation'
import { PosModule } from 'native-modules'
import pos, { PosAppGetinIuput, PosAppBank } from 'api/pos';
import { getAuthorization } from '../services/authorization';

export interface ChangeCardProps {
	style?: ViewStyle
	bank: PosAppBank
	bankList: PosAppBank[]
	onPress: (bank: PosAppBank) => void
}

const ChangeCard: React.FC<ChangeCardProps> = props => {

	const renderSettingButton = () => {
		return (
			<View style={styles.buttonContainer}>
				<View
					style={{ ...styles.container, ...commonStyle.ringButton, ...styles.button }}
				// onPress={() => {
				// 	navigate('ChangeCard', { bankList: props.bankList, bank: props.bank, onPress: props.onPress })
				// }}
				>
					<Text style={styles.setting}>切换账号</Text>
				</View>
			</View>
		)
	}
	return (
		<View style={[commonStyle.containerColumn, props.style]}>
			<RadiusButton style={{ marginVertical: translateSize(20) }} onPress={() => {
				navigate('ChangeCard', { bankList: props.bankList, bank: props.bank, onPress: props.onPress })
			}}>
				<InfoLayout
					title="入账银行："
					content=""
					hideDivier={true}
					contentView={renderSettingButton()}
				/>
			</RadiusButton>
			<View style={[commonStyle.containerColumn, styles.cardContainer]}>
				<View style={commonStyle.containerRow}>
					<Image source={assets.images.icon_check} />
					<Text style={styles.cardName}>{props.bank.bankName}</Text>
				</View>
				<Text style={styles.cardId}>{props.bank.bankNumber}</Text>
			</View>
			<Division />
		</View>
	)
}

interface ChangeCardStyle {
	inputContainer: ViewStyle
	button: ViewStyle
	setting: TextStyle
	cardContainer: ViewStyle
	cardName: TextStyle
	cardId: TextStyle
	payRow: ViewStyle
	payContainer: ViewStyle
	payIcon: ImageStyle
	payTitle: TextStyle
	container: ViewStyle
	buttonContainer: ViewStyle
}

const styles = StyleSheet.create<ChangeCardStyle>({
	inputContainer: {
		justifyContent: 'center',
	},
	button: {
		textAlign: 'center',
		alignItems: 'center',
		flex: -1,
		width: translateSize(130),
	},
	setting: {

		color: themeColors.primary,
		fontSize: translateSize(22),
	},
	cardContainer: {
		paddingLeft: translateSize(62),
		paddingRight: translateSize(32),
		paddingBottom: translateSize(50),
	},
	cardName: {
		paddingHorizontal: translateSize(32),
		fontSize: translateSize(32),
		color: themeColors.title,
	},
	cardId: {
		fontSize: translateSize(24),
		color: themeColors.title,
		paddingTop: translateSize(24),
		paddingLeft: translateSize(70),
	},
	payRow: {
		justifyContent: 'space-between',
		paddingHorizontal: translateSize(32),
		paddingVertical: translateSize(30),
	},
	payContainer: {
		width: '44%',
		flexDirection: 'row',
		justifyContent: 'center',
		paddingVertical: translateSize(24),
		borderColor: themeColors.divider,
		borderWidth: 1,
		borderRadius: translateSize(4),
	},
	payIcon: {
		width: translateSize(40),
		height: translateSize(40),
	},
	payTitle: {
		fontSize: translateSize(28),
		color: themeColors.title,
		paddingLeft: translateSize(8),
	},
	container: {
		flexDirection: 'column',
		alignItems: 'center',
		justifyContent: 'center',
		width: '100%',
		borderRadius: translateSize(10),
		height: translateSize(77),
		backgroundColor: themeColors.primary,
	},
	buttonContainer: {
		width: translateSize(200), backgroundColor: 'transparent', alignItems: 'center'
	}
})

export default ChangeCard
